<template>
  <view class="content">
    <view
      class="navbar"
      :style="{position:headerPosition,top:headerTop}"
    >
      <view
        class="nav-item"
        :class="{current: filterIndex === 0}"
        @click="tabClick(0)"
      >
        综合排序
      </view>
      <view
        class="nav-item"
        :class="{current: filterIndex === 1}"
        @click="tabClick(1)"
      >
        销量优先
      </view>
      <view
        class="nav-item"
        :class="{current: filterIndex === 2}"
        @click="tabClick(2)"
      >
        <text>价格</text>
        <view class="p-box">
          <text
            :class="{active: priceOrder === 1 && filterIndex === 2}"
            class="yticon icon-shang"
          />
          <text
            :class="{active: priceOrder === 2 && filterIndex === 2}"
            class="yticon icon-shang xia"
          />
        </view>
      </view>
      <text
        class="cate-item yticon icon-fenlei1"
        @click="toggleCateMask('show')"
      />
    </view>
    <view class="goods-list">
      <view 
        v-for="(item, index) in goodsList"
        :key="index"
        class="goods-item"
        @click="navToDetailPage(item)"
      >
        <view class="image-wrapper">
          <image
            :src="item.image"
            mode="aspectFill"
          />
        </view>
        <text class="title clamp">
          {{ item.title }}
        </text>
        <view class="price-box">
          <text class="price">
            {{ item.price }}
          </text>
          <text>已售 {{ item.sales }}</text>
        </view>
      </view>
    </view>
    <uni-load-more :status="loadingType" />
		
    <view
      class="cate-mask"
      :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''"
      @click="toggleCateMask"
    >
      <view
        class="cate-content"
        @click.stop.prevent="stopPrevent"
        @touchmove.stop.prevent="stopPrevent"
      >
        <scroll-view
          scroll-y
          class="cate-list"
        >
          <view
            v-for="item in cateList"
            :key="item.id"
          >
            <view class="cate-item b-b two">
              {{ item.name }}
            </view>
            <view 
              v-for="tItem in item.child"
              :key="tItem.id" 
              class="cate-item b-b" 
              :class="{active: tItem.id==cateId}"
              @click="changeCate(tItem)"
            >
              {{ tItem.name }}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
  components: {
    uniLoadMore	
  },
  data() {
    return {
      cateMaskState: 0, // 分类面板展开状态
      headerPosition:'fixed',
      headerTop:'0px',
      loadingType: 'more', // 加载更多状态
      filterIndex: 0, 
      cateId: 0, // 已选三级分类id
      priceOrder: 0, // 1 价格从低到高 2价格从高到低
      cateList: [],
      goodsList: []
    }
  },
		
  onLoad(options){
    // #ifdef H5
    this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px'
    // #endif
    this.cateId = options.tid
    this.loadCateList(options.fid,options.sid)
    this.loadData()
  },
  onPageScroll(e){
    // 兼容iOS端下拉时顶部漂移
    if(e.scrollTop >= 0){
      this.headerPosition = 'fixed'
    }else{
      this.headerPosition = 'absolute'
    }
  },
  // 下拉刷新
  onPullDownRefresh(){
    this.loadData('refresh')
  },
  // 加载更多
  onReachBottom(){
    this.loadData()
  },
  methods: {
    // 加载分类
    async loadCateList(fid, sid){
      const list = await this.$api.json('cateList')
      const cateList = list.filter(item => item.pid === fid)
				
      cateList.forEach(item => {
        const tempList = list.filter(val => val.pid === item.id)
        item.child = tempList
      })
      this.cateList = cateList
    },
    // 加载商品 ，带下拉刷新和上滑加载
    async loadData(type = 'add', loading) {
      // 没有更多直接返回
      if(type === 'add'){
        if(this.loadingType === 'nomore'){
          return
        }
        this.loadingType = 'loading'
      }else{
        this.loadingType = 'more'
      }
				
      const goodsList = await this.$api.json('goodsList')
      if(type === 'refresh'){
        this.goodsList = []
      }
      // 筛选，测试数据直接前端筛选了
      if(this.filterIndex === 1){
        goodsList.sort((a,b) => b.sales - a.sales)
      }
      if(this.filterIndex === 2){
        goodsList.sort((a,b) => {
          if(this.priceOrder === 1){
            return a.price - b.price
          }
          return b.price - a.price
        })
      }
				
      this.goodsList = this.goodsList.concat(goodsList)
				
      // 判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
      this.loadingType = this.goodsList.length > 20 ? 'nomore' : 'more'
      if(type === 'refresh'){
        if(loading === 1){
          uni.hideLoading()
        }else{
          uni.stopPullDownRefresh()
        }
      }
    },
    // 筛选点击
    tabClick(index){
      if(this.filterIndex === index && index !== 2){
        return
      }
      this.filterIndex = index
      if(index === 2){
        this.priceOrder = this.priceOrder === 1 ? 2 : 1
      }else{
        this.priceOrder = 0
      }
      uni.pageScrollTo({
        duration: 300,
        scrollTop: 0
      })
      this.loadData('refresh', 1)
      uni.showLoading({
        title: '正在加载'
      })
    },
    // 显示分类面板
    toggleCateMask(type){
      const timer = type === 'show' ? 10 : 300
      const	state = type === 'show' ? 1 : 0
      this.cateMaskState = 2
      setTimeout(() => {
        this.cateMaskState = state
      }, timer)
    },
    // 分类点击
    changeCate(item){
      this.cateId = item.id
      this.toggleCateMask()
      uni.pageScrollTo({
        duration: 300,
        scrollTop: 0
      })
      this.loadData('refresh', 1)
      uni.showLoading({
        title: '正在加载'
      })
    },
    // 详情
    navToDetailPage(item){
      // 测试数据没有写id，用title代替
      const id = item.title
      uni.navigateTo({
        url: `/pages/product/product?id=${id}`
      })
    },
    stopPrevent(){}
  },
}
</script>

<style lang="scss">
	page, .content{
		background: $page-color-base;
	}
	.content{
		padding-top: 96rpx;
	}

	.navbar{
		position: fixed;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80rpx;
		background: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,.06);
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: $base-color;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120rpx;
					height: 0;
					border-bottom: 4rpx solid $base-color;
				}
			}
		}
		.p-box{
			display: flex;
			flex-direction: column;
			.yticon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				height: 14rpx;
				line-height: 1;
				margin-left: 4rpx;
				font-size: 26rpx;
				color: #888;
				&.active{
					color: $base-color;
				}
			}
			.xia{
				transform: scaleY(-1);
			}
		}
		.cate-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80rpx;
			position: relative;
			font-size: 44rpx;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36rpx;
			}
		}
	}

	/* 分类 */
	.cate-mask{
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 95;
		transition: .3s;
		
		.cate-content{
			width: 630rpx;
			height: 100%;
			background: #fff;
			float:right;
			transform: translateX(100%);
			transition: .3s;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.cate-content{
				transform: translateX(0);
			}
		}
	}
	.cate-list{
		display: flex;
		flex-direction: column;
		height: 100%;
		.cate-item{
			display: flex;
			align-items: center;
			height: 90rpx;
			padding-left: 30rpx;
      font-size: 28rpx;
			color: #555;
			position: relative;
		}
		.two{
			height: 64rpx;
			color: #303133;
			font-size: 30rpx;
			background: #f8f8f8;
		}
		.active{
			color: $base-color;
		}
	}

	/* 商品列表 */
	.goods-list{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30rpx;
		background: #fff;
		.goods-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40rpx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330rpx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80rpx;
		}
		.price-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10rpx;
			font-size: 24rpx;
			color: $font-color-light;
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
			&:before{
				content: '￥';
				font-size: 26rpx;
			}
		}
	}
	

</style>
